<template>
	<view class="left clearfix bai">
		<top :scrollTop = "scrollTop"></top>
		<view class="course-box left clearfix">
			<view class="course-title left clearfix">
				新手指南
			</view>
			
			<view class="course-content left clearfix" v-if="data && data[0]">
				
				
				<view class="course-item left clearfix" v-for="(item,index) in data">
					<view class="course-image left">
						<image :src="item.poster" mode="aspectFill" style="width:100%;height:100%;"></image>
					</view>
					<view class="course-titles left clearfix ellipsis">
						{{item.title}}
					</view>
					<view class="course-click left">
						{{item.click}}人已学习 <label>立即学习</label>
					</view>
				</view>
				
				
				
				
				
			</view>
			
			
			<view class="course-content left clearfix" else>
				
				<view class="course-null-data left clearfix">
					<view class="course-null-icon left">
						<uni-icons type="icon-wujilu8" size="50" color="#ccc" custom-prefix="iconfont"></uni-icons>
					</view>
					<view class="course-null-text left">
						暂无数据
					</view>
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<style>
	
</style>
<style scoped>
	.course-null-data view{width:100%;margin-top:10px;color:#999;text-align: center;font-size:14px;}
	.course-null-data{width:200px;height:200px;margin-left:calc((100% - 200px)/2);margin-top:200px;}
	.course-item:hover {transform: translateY(-10px);}
	.course-click label{float:right;width:80px;line-height:25px;border:1px solid #2979ff;color:#2979ff;border-radius: 5px;text-align: center;margin-right:15px;font-size:13px;}
	.course-click{width:calc(100% - 10px);margin-left:5%;line-height:25px;color:#999;font-size:15px;margin-top:30px;}
	.course-titles{width:calc(100% - 20px);margin-left:10px;line-height:15px;font-weight:bold;margin-top:20px;}
	.course-image image{border-radius: 5px 5px 0 0;}
	.course-image{width:100%;height:190px;}
	.course-item{width:22%;height:300px;background:#fff;border-radius: 5px;margin:1.5%;box-shadow: 1px 2px 8px 0 rgb(0 0 0 / 10%);cursor:pointer;transition: transform 0.3s ease;}
	.course-content{width:calc(100% - 40px);margin-left:20px;min-height:500px;margin-top:30px;}
	.course-title{width:calc(100% - 20px);padding-left:20px;color: rgb(21, 27, 38);font-size: 18px;font-weight: 500;line-height: 28px;margin-top:20px;}
	.course-box{width:96%;min-height:600px;margin-left:2%;background:#fff;margin-top:70px;border-radius: 12px;padding-bottom:50px;}
</style>


<script>
	var db = uniCloud.database();
	import common from "@/static/js/common.js"
	export default {
		data() {
			return {
				data:[],
				scrollTop:0
			}
		},
		mounted() {
			this.getDataList();
		},
		onReady() {
			var that = this;
			window.onscroll = function() {
			  that.scrollTop = common.getScrollTop();
			};
		},
		methods: {
			getDataList(){
				db.collection('course').orderBy('create_date desc').get().then(res=>{
					this.data = res.result.data;
				});
			}
		}
	}
</script>
